import QtQuick 2.12
import QtQuick.Window 2.12
/*
  状态与过渡
  QML中图形元素都拥有状态属性，元素可以有多种状态，每个状态都可以定义不同的属性配置，状态的切换可以通过过渡
  定义状态中间的转换动画
*/
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    //添加Rectangle1
    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "red"  //填充红色
        anchors.left: parent.left
        anchors.top: parent.top
        Text {
            id: window_text
            anchors.centerIn: parent
            font.pointSize: 20
            text: qsTr("rect1")
        }
        //给Rectangle定义两个状态
        property int myNum: 1
        states: [
            //状态1 当自定义属性myNum等于1的时候，Rectangle1的填充颜色改成红色
            State {
                name: "state 1"
                when:rect1.myNum === 1
                changes: [
                    PropertyChanges {
                        target: rect1
                        color:"red"


                    }
                ]

            },
            State {//状态2 当自定义属性myNum等于2的时候，Rectangle1的填充颜色改成蓝色
                name: "state 2"
                when: rect1.myNum === 2
                changes:[
                    PropertyChanges {
                        target: rect1
                        color: "blue"

                    }
                ]

            }
        ]
        //添加鼠标区域,填充Rectangle1,当鼠标按下时，myNum等于2，当鼠标释放时，myNum等于1
        MouseArea {
            anchors.fill: parent
            onEntered: {
                rect1.myNum = 2
            }
            onExited: {
                rect1.myNum = 1
            }
        }
    }
    //添加Rectangle2
    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"  //填充红色
        anchors.left: rect1.right
        anchors.top: parent.top
        anchors.leftMargin: 10
        Text {
            id: window_text2
            anchors.centerIn: parent
            font.pointSize: 20
            text: qsTr("rect2")
        }
        //给Rectangle2定义两个状态
        state: "state 1"
        states: [
            //状态1 Rectangle2的填充颜色改成红色
            State {
                name: "state 1"
                PropertyChanges {
                    target: rect2
                    color:"red"
                }
            },
            State {//状态2 Rectangle2的填充颜色改成蓝色
                name: "state 2"
                PropertyChanges {
                    target: rect2
                    color: "blue"

                }
            }
        ]
        //添加鼠标区域,填充Rectangle2,当鼠标按下时，修改Rectangle2状态为状态2，当鼠标释放时，修改Rectangle2状态为状态1
        MouseArea {
            anchors.fill: parent
            onEntered: {
                rect2.state = "state 2"
            }
            onExited: {
               rect2.state = "state 1"
            }
        }
        //给Rectangle2添加两个过渡效果
        transitions: [
            Transition {//过渡效果1，当状态从状态1跳转到状态2时，颜色属性变化持续时间为300毫秒
                from: "state 1"
                to: "state 2"

                ColorAnimation {
                    property: "color"
                    //from: "white"
                    //to: "black"
                    duration: 300
                }

            },
            Transition {//过渡效果2，当状态从状态2跳转到状态1时，颜色属性变化持续时间为500毫秒
                from: "state 2"
                to: "state 1"
                ColorAnimation {
                    property: "color"
                    duration: 500
                }

            }
        ]
    }
}
